<template>
	<view class="city">
		<u-loading-page
			style="z-index: 999999;opacity: 0.5;" 
			loading-text="加载中..." 
			icon-size="24" 
			:loading="loading" 
			loading-color="#000000"
			fontSize="14"
			bgColor="#000000">
		</u-loading-page>
		<view class="city-head" :style="{backgroundImage:`url(${cityData.weatherBgImage})`}">
			<!-- 自定义顶部导航栏 -->
			<navSearch @search="onSearch" :search="search"></navSearch>
			
			<!-- 城市天气显示 -->
			<view class="city-head-bg" :style="{backgroundImage:`url(${cityData.cityImage})`}">
				<view class="city-head-weather" :style="{backgroundImage:`url(${cityData.weatherImage})`}">
					<view class="city-head-fixed">
						当前天气<u-icon name="map" size="20" color="#139AE0"></u-icon></image>
						{{cityData.city}}
					</view>
					<view class="city-head-weather-icon">
						<image :src="cityData.weatherIcon" mode="widthFix"></image>
						<view class="celsius">
							{{cityData.celsius}}
						</view>
						<view class="notes">
							<view>
								{{cityData.notes}}
							</view>
							<view >
								℃
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 卡片tab组件 -->
		<cardTab 
			:current="cardCurrent" 
			@change="changeCardTabIndex" 
			:card-tab-list="cardTabList" 
			:offsetTop="67"
		></cardTab>

		<tab v-if="cardCurrent==0" :current="current" :bgColor="'#F6F5F5'" :offsetTop="193" @change="changeTabIndex" :tab-list="tabList"></tab>
		<u-empty
			:style="current !== 0||cardCurrent !==0 ? '' : 'display:none'"
		    mode="data"
		>
		</u-empty>
		
		<!-- 综合模块 -->
		<view :style="current === 0&&cardCurrent==0 ? '' : 'display:none'">
			<commonPost :list="postList"></commonPost>
		</view>
	</view>
</template>
<script>
	// TODO 修复Android v3 加载过慢问题
	// #ifdef APP-PLUS
	var domModule = weex.requireModule('dom');
	domModule.addRule('fontFace', {
		'fontFamily': "uniicons",
		'src': "url('/static/uni.ttf')"
	});
	// import cellGroup from '../../uni_modules/uview-ui/libs/config/props/cellGroup';
	// #endif
	import navSearch from "@/components/nav-search/nav-search.vue" 
	import NavBar from "@/components/common-nav/common-nav.vue" 
	
	import tab from '@/components/common-tab/common-tab.vue';
	import commonPost from '@/components/common-post/common-post.vue';
	import { getWeather } from '@/request/api.js'
	export default {
		components: {
		    tab,
			commonPost,
			NavBar,
			navSearch
		},
		onLoad(options) {// 页面加载时获取天气数据。也可以按需在用户交互时获取。例如点击按钮触发fetchWeather方法。
			this.cityId = options.id
			this.getCityInfo()
			this.fetchWeather(); // 获取天气数据。确保在组件加载时调用此方法。或者根据需要调整触发时机。例如：在用户输入城市名称后调用。 
		},
		data() {
			return {
				cityId:null,
				loading:false,
				current:0,	//当前选择的tab下标
				cardCurrent:0,	//当前选择的卡片tab下标
				cityData:{},
				search:'广州',
				tabList: [
					{
						name: '综合',
					}, {
						name: '体验',
					}, {
						name: '景点'
					}, {
						name: '美食',
					}, {
						name:'酒店'
					},
				],
				cardTabList:[
					{
						name:'吐槽集中营',
						image:"",
						icon:''
					},
					{
						name:'官方攻略',
						image:"",
						icon:''
					},
					{
						name:'本地向导',
						image:"",
						icon:''
					}
				],
				postList:[]//帖子内容
			}
		},
		onShareAppMessage() {},
		methods: {
			// 获取天气
			fetchWeather() {
				// 获取学习列表详情信息
				getWeather ({key:'123456',q:'Beijing'}).then((res) => {
				  console.log('成功', res);  
				}).catch((err) => { 
				  console.error('失败', err);
				});
			},
			// 响应子组件CardTab切换
			changeCardTabIndex(index){
				this.cardCurrent = index;
			},
			// 响应子组件tab切换
			changeTabIndex(index){
				this.current = index;
			},
			// 获取城市信息
			getCityInfo(){
				this.cityData = this.$dataJson.find(item=>item.cityId==this.cityId)
				// 帖子信息
				this.postList = this.cityData&&this.cityData.postList
				this.search = this.cityData.cityName
			},
			// 搜索数据
			onSearch(data){
				this.loading = true
				this.search = data
				setTimeout(()=>{
					this.loading = false
				},1000)
				setTimeout(()=>{
					uni.showToast({
						title: `暂无${this.search}的内容`,
						icon:'error'
					});
				},1300)
			}
		}
	}
</script>

<style lang="scss">
.city {
	width: 100%;
	height: 100vh;
	overflow: scroll;
	background-color: #FFFFFF;
	.city-head{
		width: 100%;
		padding-top:130rpx;
		background-size: 100% 100%;
		.city-head-bg{
			width: calc(100% - 40rpx);
			height: 230rpx;
			background-size: 100% 100%;
			margin: 0 20rpx;
			position: relative;
			border-radius: 20rpx;
			.city-head-weather{
				position: absolute;
				width: 190rpx;
				height: 85rpx;
				right: 20rpx;
				top: 20rpx;
				background-size: 100% 100%;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.city-head-fixed{
					display: flex;
					align-items: flex-end;
					font-size:18rpx;
					margin-bottom: 5rpx;
					image{
						margin:0 5rpx 0 10rpx;
						width: 16rpx;
					}
				}
				.city-head-weather-icon{
					display: flex;
					font-size: 12rpx;
					align-items: center;
					image{
						width: 45rpx;
					}
					.celsius{
						font-size: 34rpx;
						margin: 0 8rpx 0 15rpx;
					}
					.notes{
						display: flex;
						flex-direction: column;
						font-weight: 500;
						justify-content: center;
					}
				}
			}
		}
		.banner {
			width: 100%;
			border-radius: 20rpx;
		}
	}
}
</style>
